<template>
    <el-card>
        <div slot="header" class="clearfix line_27">
            <el-breadcrumb separator="/" class="inline_block">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="right">
                <el-button type="primary" plain @click="showCreate" icon="el-icon-circle-plus-outline">添加</el-button>
                <el-button plain @click="getData" icon="el-icon-refresh">刷新</el-button>
            </div>
        </div>
        <el-table
                style="min-height: 400px"
                v-loading="loading"
                :data="datas">
            <el-table-column
                    prop="username"
                    label="用户名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="昵称"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="mail"
                    label="邮箱">
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="权限">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.role=='0'">用户</el-tag>
                    <el-tag type="danger" v-else>管理员</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="reg_date"
                    label="注册时间">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button @click="showEditor(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="showRoleEditor(scope.row)" type="text" size="small">权限</el-button>
                    <el-button v-if="scope.row.username!=='admin'" @click="deleteUser(scope.row.username)" type="text"
                               size="small" class="red">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="创建新用户" :visible.sync="createView">
            <el-form :model="createForm">
                <el-form-item label="账户：" :label-width="formLabelWidth">
                    <el-input v-model="createForm.username" autocomplete="off" placeholder="请输入账户"></el-input>
                </el-form-item>
                <el-form-item label="密码：" :label-width="formLabelWidth">
                    <el-input v-model="createForm.password" type="password" autocomplete="off"
                              placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="昵称：" :label-width="formLabelWidth">
                    <el-input v-model="createForm.name" autocomplete="off" placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item label="权限：" :label-width="formLabelWidth">
                    <el-radio-group v-model="createForm.role">
                        <el-radio :label="0">用户</el-radio>
                        <el-radio :label="1">管理员</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="邮箱：" :label-width="formLabelWidth">
                    <el-input v-model="createForm.mail" autocomplete="off" placeholder="请输入邮箱"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="createView = false">取 消</el-button>
                <el-button type="primary" @click="createUser" :loading="btnLoading">确 定</el-button>
            </div>
        </el-dialog>
        <!--修改用户信息-->
        <el-dialog title="修改用户信息" :visible.sync="eidotrView">
            <el-form :model="editorForm">
                <el-form-item label="账户：" :label-width="formLabelWidth">
                    <el-input v-model="editorForm.username" autocomplete="off" placeholder="请输入账户" disabled></el-input>
                </el-form-item>
                <el-form-item label="昵称：" :label-width="formLabelWidth">
                    <el-input v-model="editorForm.name" autocomplete="off" placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item label="权限：" :label-width="formLabelWidth">
                    <el-radio-group v-model="editorForm.role">
                        <el-radio :label="0">用户</el-radio>
                        <el-radio :label="1">管理员</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="邮箱：" :label-width="formLabelWidth">
                    <el-input v-model="editorForm.mail" autocomplete="off" placeholder="请输入邮箱"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="eidotrView = false">取 消</el-button>
                <el-button type="primary" @click="editorUser" :loading="btnLoading">确 定</el-button>
            </div>
        </el-dialog>
        <!--修改用户权限信息-->
        <el-dialog title="修改用户信息" :visible.sync="eidotrRoleView">
            <el-form :model="editorRoleForm">
                <el-form-item label="账户：" :label-width="formLabelWidth">
                    <el-input v-model="editorRoleForm.username" autocomplete="off" placeholder="请输入账户"
                              disabled></el-input>
                </el-form-item>
                <el-form-item label="已拥有权限：" :label-width="formLabelWidth">
                    <el-tag v-for="item in editorRoleForm.competence">{{item}}</el-tag>
                    <el-tag v-if="editorRoleForm.competence.length==0" type="info">暂无权限</el-tag>
                </el-form-item>
                <el-form-item :label="cabinet.name+'：'" :label-width="formLabelWidth" v-for="cabinet in cabinets">
                    <div v-for="item in cabinet.item">
                        {{item.name}}
                        <!--{{item.item}}-->
                        <!--<span v-for="data in item.item">{{data}}<br></span>-->
                        <el-checkbox-group v-model="editorRoleForm.competence">
                            <el-checkbox :label="data.id" v-for="data in item.item">
                                {{data.comment==''?data.name:data.comment}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>

                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="eidotrView = false">取 消</el-button>
                <el-button type="primary" @click="editorUserRole" :loading="btnLoading">确 定</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>

<script>
    export default {
        name: "list",
        data() {
            return {
                formLabelWidth: '120px',
                datas: [],
                btnLoading: false,
                createView: false,
                eidotrView: false,
                eidotrRoleView: false,
                loading: false,
                editorRoleForm: {
                    username: '',
                    name: '',
                    role: 0,
                    mail: '',
                    competence: []
                },
                editorForm: {
                    username: '',
                    name:
                        '',
                    role:
                        0,
                    mail:
                        '',
                },
                createForm: {
                    username: '',
                    name:
                        '',
                    password:
                        '',
                    role:
                        0,
                    mail:
                        '',
                },
                cabinets: [],
                // roles: {1: [], 2: [], 3: [], 4: []}
            }
        },
        methods: {
            init() {
                this.getData()
                this.getCabinets()
            },
            showRoleEditor(form) {
                this.eidotrRoleView = true
                this.editorRoleForm = form
            },
            showEditor(form) {
                this.eidotrView = true
                this.editorForm = form
            },
            editorUserRole() {
                const _this = this
                this.btnLoading = true
                const username = _this.editorRoleForm.username
                const competence = JSON.stringify(_this.editorRoleForm.competence)
                this.$request({
                    url: '/api/user/update_role.do', method: 'post', data: {username, competence}
                }).then(res => {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    _this.btnLoading = false
                    _this.eidotrRoleView = false
                }).catch((error) => {
                    this.btnLoading = false
                })
            },
            editorUser() {
                const _this = this
                this.btnLoading = true
                this.$request({
                    url: '/api/user/update.do', method: 'post', data: _this.editorForm
                }).then(res => {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    _this.btnLoading = false
                    _this.eidotrView = false
                }).catch((error) => {
                    this.btnLoading = false
                })
            },
            showCreate() {
                this.createView = true
            },
            createUser() {
                const _this = this
                this.btnLoading = true
                this.$request({
                    url: '/api/user/create.do', method: 'post', data: _this.createForm
                }).then(res => {
                    this.$message({
                        message: '创建成功',
                        type: 'success'
                    });
                    _this.btnLoading = false
                    _this.createView = false
                    _this.createForm = {
                        username: '', name: '', password: '', role: 0, mail: '',
                    }
                    _this.getData()
                }).catch((error) => {
                    this.btnLoading = false
                })
            },
            deleteUser(username) {
                this.$confirm('此操作将永久删除该账户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const _this = this
                    this.loading = true
                    this.$request({
                        url: '/api/user/delete.do', method: 'post', data: {username}
                    }).then(res => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.loading = false
                        _this.getData()
                    }).finally(() => {
                        this.loading = false
                    })
                }).catch(() => {
                });
            },
            getCabinets() {
                const _this = this
                this.loading = true
                this.$request({
                    url: '/api/cabinet/list.do', method: 'post',
                }).then(res => {
                    _this.loading = false
                    _this.cabinets = res
                }).catch((error) => {
                    this.msg = error
                    this.loading = false
                })
            },
            getData() {
                const _this = this
                this.loading = true
                this.$request({
                    url: '/api/user/list.do', method: 'post',
                }).then(res => {
                    _this.loading = false
                    _this.datas = res
                }).catch((error) => {
                    this.msg = error
                    this.loading = false
                })
            }
        },
        created() {
            this.init()
        }
    }
</script>

<style scoped>
    .el-tag + .el-tag {
        margin-left: 5px;
    }
</style>
